<template>
    <div class="content">
      <el-row class="bgW">
        <el-col :span="22">
          <!--检索条件-->
          <el-form class="search" label-suffix="：" :inline="true" size="mini" :model="search">
            <el-form-item label="录入日期">
              <el-date-picker
                v-model="search.create_time_start"
                type="date"
                class="w130"
                placeholder="开始日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
              <el-date-picker
                v-model="search.create_time_end"
                type="date"
                class="w130"
                placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="姓名/K3码">
              <el-input
                v-model="search.customer_name"
                maxlength="30"
                class="w84"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item label="电话">
              <el-input
                v-model="search.telephone"
                maxlength="30"
                class="w100"
                placeholder="请输入"
                clearable
              />
            </el-form-item>

            <!-- v-if="!userInfo.shop_id" -->
          <el-form-item label="护理师">
            <el-select
              v-model="search.nurse_id"
              clearable
              remote
              filterable
              :remote-method="remoteMethodStaff"
              placeholder="请输入"
              class="w120"
            >
              <el-option
                v-for="item in options.nurse_id"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
           
            <el-form-item label="门店/门诊" v-if="!userInfo.shop_id">
              <el-select
                v-model="search.shop_id"
                clearable
                remote
                filterable
                :remote-method="remoteMethod"
                placeholder="请输入"
                class="w120"
              >
                <el-option
                  v-for="item in options.shop_id"
                  :key="item.shopId"
                  :label="item.shopName"
                  :value="item.shopId"
                />
              </el-select>
            </el-form-item>
  
        
           
        
          </el-form>
        </el-col>
        <el-col :span="2" style="text-align: right;">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList('search')">搜索</el-button>
        </el-col>
      </el-row>
      <div class="accountCon">
        <div class="btnBox">
          <el-button
            v-if="!userInfo.shop_id"
            type="primary"
            :disabled="!idList.length"
            class="mb10"
            size="mini"
            @click="hint('导出选中列表')"
          >导出数据</el-button>
          <div v-if="userInfo.shop_id"></div>

        </div>
        <!--列表-->
        <el-row>
          <el-col :span="24">
            <el-table
              :data="list"
              size="small"
              border
              v-loading="loading"
              :cell-style="$style.cellStyle"
              :header-cell-style="$style.rowClass"
              @selection-change="handleSelectionChange"
            >
              <ElTableColumn v-if="!userInfo.shop_id" type="selection" width="50" />
              <ElTableColumn label="录入时间" width="150" prop="create_time"  fixed="left"/>
              <ElTableColumn label="姓名" prop="customer_name" width="100"  fixed="left"/>
              <ElTableColumn label="联系电话" prop="telephone" width="100" fixed="left"/>
              <ElTableColumn label="性别" width="50" prop="sex" />
              <ElTableColumn label="来源" width="120">
                <template slot-scope="{ row }">
                  {{row.source_name}}
                  <span v-if="row.source_type_id > 0">--{{row.customer_source_name}}</span>
                </template>
              </ElTableColumn>
              <ElTableColumn label="护理师" prop="nurse_name" />
              <ElTableColumn label="卡项数量" prop="service_num" />
              <ElTableColumn label="门店/门诊" prop="shop_name" width="150" />
              <ElTableColumn label="K3码" prop="king_no" />
              <ElTableColumn label="操作" fixed="right">
                <template slot-scope="{ row }">
                  <span class="theme" @click="tapBtn('客户详情',row)">查 看</span>
                </template>
              </ElTableColumn>
            </el-table>
            <pagination
              class="page tc mt10"
              :total="page.total"
              :page.sync="page.page"
              :limit.sync="page.limit"
              @pagination="getList"
            />
          </el-col>
        </el-row>
      </div>
    </div>
  </template>
  
  <script>
  import { mapGetters } from "vuex";
  import pagination from "@/components/Pagination";
  import {
    clientList,
    ssettingList,
    statusSetting,
    getGradeList,
    clientExport,
    getTwoLabel,
    showBalance
  } from "@/api/client";
  import { getShopList,getMarketLsit } from "@/api/shop";
  import { getStaffList } from "@/api/staff";

  import { customerList } from "@/api/serviceConsume";
  
  
  class Search {
    create_time_start = "";
    create_time_end = "";
    customer_name = "";
    effective_entry = 0;
    shop_id = "";
    nurse_id = "";
    type = "";
    market_id = "";
  }
  class Options {
    source_id = [];
    source_type_id = [];
    membership_leve = [];
    member_label = [];
    shop_id = [];
    market_id = [];
    nurse_id = [];
    member_classification = [];
    repair_progress = [];
    scar_id = [];
  }
  class Page {
    total = 0;
    page = 1;
    limit = 10;
  }
  export default {
    name: "ClientList",
    components: {
      pagination
    },
    data() {
      return {
        search: new Search(),
        options: new Options(),
        page: new Page(),
        list: [],
        idList: "",
        loading: false,
        customerSourceShow:false,
      };
    },
    filters: {
      statusFilter(val) {
        return ["启用", "禁用"][+val];
      }
    },
    computed: {
      ...mapGetters(["userInfo"])
    },
    mounted() {
      this.getOptions();
      if (typeof this.$route.query.search == "object") {
        this.search = this.$route.query.search;
        this.page = this.$route.query.page;
      }
      this.getList();
    },
    methods: {

      // 获取选项
      getOptions() {
        getGradeList().then(res => {
          this.options.membership_leve = res.list;
        });
        getTwoLabel().then(res => {
          this.options.member_label = res.data;
        });
        ssettingList({ page: 1, limit: 100000 }).then(res => {
          let that = this;
          res.list.forEach(function(item) {
            if (item.category_id == 1) {
              that.options.scar_id.push(item);
            } else if (item.category_id == 4) {
              that.options.source_id.push(item);
            } else if (item.category_id == 5) {
              that.options.repair_progress.push(item);
            } else if (item.category_id == 8) {
              that.options.member_classification.push(item);
            }else if (item.category_id == 15) {
              that.options.source_type_id.push(item);
            }
          });
        });
      },
      // 获取列表
      getList(option) {
        this.loading = true;
        if (option === "search") this.page = new Page();
        customerList({ ...this.search, ...this.page, is_join_shop: 0 }).then(
          res => {
            this.list = res.data.list;
            this.page.total = res.data.dataCount;
            this.loading = false;
         
          }
        );
      },
      // 搜索市场
      getMarket(e) {
        getMarketLsit({ page:1, limit:100000, marketName:e }).then(res => {
          console.log(res);
          this.options.market_id = res;
        })
      },
  
      // 搜索门店
      remoteMethod(e) {
        getShopList({ page: 1, limit: 100000, shopName: e }).then(res => {
          this.options.shop_id = res.list;
        });
      },
  
      // 搜索员工
      remoteMethodStaff(e) {
        getStaffList({ page: 1, limit: 100000, staffName: e }).then(res => {
          this.options.nurse_id = res.list;
        });
      },
    
      // 跳转按钮
      tapBtn(routerName, row) {
  
        const query = {
          id: row.id,
          activeName: "first",
          customer_name: row.customer_name,
          search: this.search,
          pageName: "客户列表",
          page:this.page
        };
        //this.$router.push({ name: routerName, query });
        if(routerName=='客户信息'){
          this.$router.push({ name: routerName, query });
        }
         if(routerName=='客户详情'){
        let route = this.$router.resolve({ name: routerName, query });
        window.open(route.href, '_blank');
         }
      },
      // 提示
      hint(text) {
        this.$confirm(`${text},是否确定？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.getExport();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      // 导出
      getExport() {
        clientExport({ id: this.idList, type: 1 }).then(res => {
          window.open(res.data.url);
        });
      },
      // 改变表格选中状态
      handleSelectionChange(val) {
        this.idList = val.map(i => {
          return i.id;
        });
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .mainColor {
    color: #2dc0a3;
  }
  .content {
    height: calc(100% - 56px);
    overflow-y: auto;
  }
  .bgW {
    background: #fff;
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 20px;
  }
  
  .el-form-item {
    margin: 5px 20px 3px 0;
  }
  .accountCon {
    background: #fff;
    padding: 0px 10px 80px;
    .btnBox {
      display: flex;
      justify-content: end;
      // justify-content: space-between;
    }
  }
  </style>
  